<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>单行文本溢出显示省略号</title>
    <style>
      div {
        width: 150px;
        height: 80px;
        background-color: pink;
        margin: 100px auto;
        /* 此属性表示：如果文字显示不开自动换行 */
        /* white-space: normal; */

        /* 单行文本溢出显示省略号--必须满足三个条件 */
        /* 1. 此属性表示：如果文字显示不开也必须强制一行内显示 */
        white-space: nowrap;
        /* 2. 溢出的部分隐藏起来 */
        overflow: hidden;
        /* 3. 文字溢出的时候用省略号来显示 */
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div>
      啥也不说，此处省略一万字
    </div>
  </body>
</html>
